<template>
      <div class="manage">
      <!-- 1.弹出一个dialog新增框 -->
      <el-dialog :title="operateType==='add'?'新增用户':'更新用户'"
                  :visible.sync='isShow'>
       
            <!-- 用组件写好的样式 把数据传过去 -->
            <common-form :formLabel='operateFormLabel'
                        :form='operateForm'
                        :inline="true"
                        ref='form'></common-form>
              
              <!-- 组件里面还有一个插槽的位置 放按钮 -->
            <div slot="footer" class="dialog-footer">
               <el-button @click='isShow=false'>取消</el-button>
               <el-button type="primary" @click='confirm'>确定</el-button>
            </div>
      </el-dialog>

      <!-- 2.中间的 按钮和表单区域 -->
      <div class="manage-header">
         <el-button type='primary' @click="addUser">+ 新增</el-button>
           <!-- 右边有一个input -->
          <div class="right">
             <!-- 也可以引用之前的封装好的表单 -->
             <common-form :formLabel='formLabel'
                    :form='searchForm'
                    :inline="true"
                    ref='form'>
        <el-button type="primary" @click="getList(searchForm.keyword)">搜索</el-button>
           </common-form>
       </div>
      </div>
      <!-- 3.后面的表格区域 -->
         <common-table
             :tableData="tableDate"
              :tableLabel="tableLabel"
              :config='config'
              @changePage='getList("")'
              @edit='editUser'
              @del='delUser'> 
         </common-table>
   </div>
</template>

<script>
import CommonForm from '../../components/CommonForm.vue'
import CommonTable from '../../components/CommonTable.vue'
import { getUser } from '../../../api/data.js'
export default {
   name:'User',
   data(){
     return{
        operateType:'add',
        isShow:false,//默认关闭
        operateFormLabel: [  //  表单数据
                    {
                        model: 'name',
                        label: '姓名',
                        type: 'input'
                    },
                    {
                        model: 'age',
                        label: '年龄',
                        type: 'input'
                    },
                    {
                        model: 'sex',
                        label: '性别',
                        type: 'select',
                        opts: [
                            {
                                label: '男',
                                value: 1
                            },
                            {
                                label: '女',
                                value: 0
                            }
                        ]
                    },
                    {
                        model: 'birth',
                        label: '出生日期',
                        type: 'date'
                    },
                    {
                        model: 'addr',
                        label: '地址',
                        type: 'input'
                    }
                ],
         operateForm:{ 
            name:'',
            addr:'',
            age:'',
            birth:'',
            sex:'',
         },
        formLabel:[{
          model:'keyword',//keyword对应楼下searchForm的数据名
          label:'',
          type:'input'
        }],
         searchForm:{
            keyword:'',
            },
      tableDate:[],
      tableLabel:[
         {
            prop:'name',
            // prop 以后这个值 里面可以填很多数据
            label:'姓名'
            // label 就是定义表格的列名
         },
          {
            prop:'age',
            label:'年龄'
         },
          {
            prop:'sexLabel',
            label:'性别'
         },
          {
            prop:'birth',
            label:'出生日期',
            width:200
         },
          {
            prop:'addr',
            label:'地址',
            width:320
         },
         ],
   // 分页的配置数据
      config:{
        page:1,//默认值
        total:20,
      },
     }
   },
   components:{
      CommonForm,
      CommonTable
   },
   methods:{
      //  确认 就把新增的数据传到数据库里面
      confirm(){
        if(this.operateType === 'edit'){
           this.$http.post('/user/edit',this.operateForm).then(res=> {
              console.log(res);
              this.isShow=false
               this.getList('')  
           })
        }else{
         // post获取表单的数据 提交到服务器 再发送到数据库内 $http其实就是axios封装的 
        this.$http.post('/user/add', this.operateForm).then(res => {
         //   4.请求成功后 回调函数then()返回服务器的结果res
              console.log(res);
            //   关闭窗口
              this.isShow=false
               this.getList('')
              })
        }
      },
      addUser(){
      this.isShow=true 
      this.operateType='add'
      this.operateForm={
            name:'',
            addr:'',
            age:'',
            birth:'',
            sex:'',
         }
      },    
       editUser(row){
      // 这里row传过来的是那一行的所有消息,如果直接赋值给了operateForm则为引用地址赋值,那operateForm变化表单也会变化
         this.operateType='edit'
         this.isShow=true
         // 编辑的时候 里面有旧的数据
         // this.operateForm={...row} //这里浅拷贝
         this.operateForm=row
      // console.log(this.operateForm === row)
      },
      delUser(row){
         // 简单的弹出框可用$confirm写 复杂的用el-dialog
         this.$confirm('此操作将永久删除该组件,是否继续？','提示',{
            confirmButtonText:'确认',
            cancelButtonText:"取消",
            type:'warning'
         }).then(()=>{
            console.log(row.id);
            const id =row.id
            this.$http.get('/user/del',{
                params:{ id }
            }).then((res)=>{
               this.$message({
                  type:'success',
                  message:'删除成功',
               })
               console.log(res.data);
               this.getList('')
            })
         })
      },
     
       // 获取用户列表 & 搜索 第一次渲染表格
      // 传入一个name 给他一个默认值空
      // name参数其实就是搜索输入框的
      
      getList(name=' '){
          this.config.loading=true// 获取数据前 给他一个正在加载loading属性 为true
            name ? (this.config.page=1) : '' 
            //  如果name存在 就从第一页搜索

          getUser({ //  暴露的getUser 一调用就是请求了服务器 发送了get请求 并有返回值     
             page:this.config.page, //需要传page和name参数
             name
             }).then(({data:res})=>{
            //  回调函数  data重命名为res
             this.tableDate=res.list.map(item=>{
                item.sexLabel=item.sex ===0?'女':'男'//修改其中
                return item  //  return item 就是把数组返回到tableDate上了 
             })
             this.config.total=res.count  //  总共有多少条信息
             this.config.loading=false
          })
      },
  
   },
  created() {
    this.getList('');
  }
}
</script>

<style lang="less" scoped>
  .manage-header{
     display: flex;
     justify-content: space-between;
     align-items: center;
     .right{
        margin-top: 20px!important
     }
  }
</style>>

